<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世茂中心</title>
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
</head>

<body>
     <div class="swiper-container" style="height:100%;">
     	<div class="swiper-wrapper" style="height:100%;">
          <!--音乐-->
          <!--<audio autoplay="autoplay" controls loop preload="auto" src="钢琴-温馨的背景音乐.mp3" style="opacity:0">
      		你的浏览器不支持audio标签
		 </audio>-->
          <!--第一页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s" ><img src="images/H5-17.png"></div>
                <div class="img1 ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1.3s" swiper-animate-delay="0s"><img src="images/H5-18.png"></div>
                <div class="img1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.3s" swiper-animate-delay="1.3s"><img src="images/p1 (2).png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s"><img src="images/H5-19.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--按钮-->
           <div class="swiper-slide" style="height:100%;">
            <div class="background_a ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
				<div onclick="Swiper_slideTo(2)" class="slideTo_button ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0.8s"><span>北京</span></div>
				<div onclick="Swiper_slideTo(6)" class="slideTo_button ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.2s"><span>上海</span></div>
				<div onclick="Swiper_slideTo(4)" class="slideTo_button ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.3s" swiper-animate-delay="1.6s"><span>广州</span></div>
				<div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          
          <!--北京1-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.4s" ><img src="images/H5-27.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1s"><img src="images/H5-28.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--北京1-->
          
          <!--北京2-->
           <div class="swiper-slide" style="height:100%;">
            <div class="background1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.4s" >
                <img src="images/H5-21.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                <img src="images/H5-22.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--北京2-->
          
          <!--广州1-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.4s" ><img src="images/H5-24.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1s"><img src="images/H5-25.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--广州1-->
          
          <!--广州2-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background5 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-34.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-35.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-36.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--广州2-->
          
          <!--上海1-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background6 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-38.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-39.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-40.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
           <!--上海1-->
           
          <!--上海2-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background7 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-42.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-43.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-44.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--上海2-->
          
          <!--第九页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background8 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-46.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-47.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-48.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background9 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-50.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-51.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-52.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十一页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background10 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-54.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-55.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-56.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十二页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background11 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-58.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-59.png"></div>
                <div class="img ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-60.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十三页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background12 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-62.png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-63.png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-64.png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-65.png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-66.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十四页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background13 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-68.png"></div>
                <form>
                	<div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><input type="text" placeholder="姓名" class="inp"></div>
                    <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s"><input type="text" placeholder="手机" class="inp"></div>
                    <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s"><input type="text" placeholder="公司" class="inp"></div>
                    <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s"><input type="text" placeholder="预定时间" class="inp"></div>
                    <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s"><input type="submit" placeholder="提交" class="sub"></div>
                </form>
                <div class="img2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3.5s"><img src="images/H5-69.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>
          <!--第十五页-->
          <div class="swiper-slide" style="height:100%;">
            <div class="background14 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
            	<div class="img2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" ><img src="images/H5-71.png"></div>
                <div class="img2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><img src="images/H5-72.png"></div>
                <div class="btn"><img src="images/btn01_arrow.png"></div>
            </div>
          </div>

        </div>
     </div>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
	  direction : 'vertical',
	  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素 
		swiperAnimate(swiper); //初始化完成开始动画
		
	  }, 
	  onSlideChangeEnd: function(swiper){ 
		swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  },
	  noSwiping : true
  });

  function Swiper_slideTo(index){
	  if( typeof index !== "number" ) return;
      mySwiper.slideTo(index);
  }
</script> 
</body>
</html>
